<!-- 页面中的内容 -->

<div class="main-div">
    <form name="main_form" method="POST" action="{:url('add')}">
        <table cellspacing="1" cellpadding="3" width="100%">
            <tr>
                <td class="label">角色名称：</td>
                <td>
                    <input  type="text" name="role_name" value="" />
                </td>
            </tr>
            <tr>
                <td class="label">权限列表：</td>
                <td>
                    {volist name="auths" id="auth"}
                	   <?php echo str_repeat('----------',$auth['auth_level']);?><input level="{$auth.auth_level}" type="checkbox" class="auth_btn" name="pri_id[]" value="{$auth.aid}" />{$auth.auth_name}<br />
                    {/volist}
                </td>
            </tr>
            <tr>
                <td colspan="99" align="center">
                    <input type="submit" class="submit" value=" 确定 " />
                    <input type="reset" class="button" value=" 重置 " />
                </td>
            </tr>
        </table>
    </form>
</div>
<script>

    //设置复选框选中状态
    $('.auth_btn').click(function() {

        //当前复选框选中状态
        var status = $(this).attr('checked') ? true : false;

        //当前复选框level属性值
        var level = $(this).attr('level');

        //点击父级全选或全不选自己元素
        $(this).nextAll('input').each(function() {

            if($(this).attr('level')<=level) {
                return false;
            }

            $(this).attr('checked',status);

        });

        //点击子集上其父级没有被选中的复选框变成选中状态
        $(this).prevAll('input').each(function() {

            //当前复选框
            var _this = $(this);

            //如果当前复选框的级别小于点击的复选框的级别就让其选中
            if(_this.attr('level') < level) {

                //只让父级选中，而不是随这子集变化而变化
                if(!_this.attr('checked')) {
                    _this.attr('checked',true);
                }

                //找到一个就让等级减一
                level--;

            }

        });

    });

    // 让提交只能点一次
    $('.submit').click(function() {

        //三十秒内进制重复提交
        var sec = 30;

        //提交按钮
        var _this = $(this);

        //让提交按钮处于不能被点击的状态
        _this.attr('disabled','true').parents('form').submit();

        //设置一个定时器
        var time = setInterval(function() {

            //减少时间
            sec--;

            //改变提示文字
             _this.val('提交中('+sec+')');
            
            //当到达0秒后，清除disabled属性，并清空定时器
            if( sec <= 0 ) {
                
                _this.removeAttr('disabled').val('确定');

                clearInterval(time);
            }

        } , 1000);

    });
</script>